<template>
  <div>
    <div v-for="(item,index) in datas" :key="index">
      <div class="tips-header">{{ item.label }}</div>
      <div class="containner">
        <Tabs>
          <TabPane :label="each.label" v-for="(each,key) in item.children" :key="key">
            <Row>
              <Col :lg="6" :md="8" :xs="12" v-for="(every,alls) in each.children" :key="alls">
                <router-link
                  :to="{path:'/list',query:{type:every.value,typeName:every.label}}"
                  class="type-item"
                >
                  <div class="type-img-box">
                    <img class="type-item-img" :src="global.serviceUrl + every.src">
                  </div>
                  <p class="type-item-info"><span>{{ every.label }}</span><span>{{ every.count }}&nbsp;篇</span></p>
                </router-link>
              </Col>
            </Row>
          </TabPane>
        </Tabs>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TgyItem",
  props: ["datas"]
};
</script>
<style scoped>
/* 教程 */
.tips-header {
  font-size: 20px;
  font-weight: 600;
  color: #515a6e;
  text-align: center;
  margin: 40px auto 0;
}
.type-item {
  display: block;
  margin: 5px;
  padding: 5px;
  border-radius: 3px;
  overflow: hidden;
  color: #515a6e;
  background-color: #fff;
}
.type-item:hover {
  box-shadow: 3px 3px 2px #ccc;
}
.type-item:hover .type-item-img {
  transform: scale(2);
  -moz-transform: scale(2);
  -webkit-transform: scale(2);
  -o-transform: scale(2);
}
.type-img-box {
  width: 100%;
  height: 140px;
  overflow: hidden;
}
.type-item-img {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 500ms;
  -moz-transition: transform 500ms;
  -webkit-transition: transform 500ms;
  -o-transition: transform 500ms;
}
.type-item-info {
  font-size: 12px;
  line-height: 30px;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media screen and (max-width: 1200px) {
  .type-img-box {
    height: 80px;
  }
  .type-item-info {
    height: 30px;
    line-height: 30px;
  }
}
</style>


